<script lang="ts" setup>
import eCharts from "@/plugins/echarts";
import type { EChartCoreOption } from "@/plugins/echarts";
import { useDesignStore } from "@/stores/module/design";
import { reactive, ref, onMounted } from "vue";
import type { Ref } from "vue";
import chinaJson from "@/assets/json/china.json";

const { getPrefixCls } = useDesignStore();

const prefixCls = getPrefixCls("echarts");

// 主体资方备案数量
const founderChartRef = ref<HTMLElement>() as Ref<HTMLElement>;
const founderChart = ref<eCharts.ECharts>();
const founderChartOptions = reactive<EChartCoreOption>({
  title: {
    text: "各主体备案资方数量",
    left: "center",
    right: "center",
    // textAlign: "center",
    // textVerticalAlign: "center",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      // name: "主体类型",
      // nameLocation: "end",
      data: ["融资租赁公司", "汽车金融公司", "银行", "金融租赁公司", "保险公司", "担保公司", "财务公司"],
      axisLabel: {
        rotate: -45,
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "数量",
    },
  ],
  series: [
    {
      name: "数量",
      type: "bar",
      emphasis: {
        focus: "series",
      },
      barWidth: "40%",
      data: [320, 332, 301, 334, 390, 330, 320],
    },
  ],
});

// 主地图数据
const areaMapRef = ref<HTMLElement>() as Ref<HTMLElement>;
const areaMapChart = ref<eCharts.ECharts>();
const areaMapOptions = reactive<EChartCoreOption>({
  // 背景颜色
  // backgroundColor: "#404a59",
  // 提示浮窗样式
  tooltip: {
    show: true,
    trigger: "item",
    alwaysShowContent: false,
    backgroundColor: "#0C121C",
    borderColor: "rgba(0, 0, 0, 0.16);",
    hideDelay: 100,
    triggerOn: "mousemove",
    enterable: true,
    textStyle: {
      color: "#DADADA",
      fontSize: "12",
      width: 20,
      height: 30,
      overflow: "break",
    },
    showDelay: 100,
  },
  // 地图配置
  geo: {
    map: "china",
    zoom: 1.24,
    label: {
      show: true,
      fontSize: 12,
    },
  },
});

const initFounder = (elRef: Ref<HTMLElement>, options: EChartCoreOption) => {
  founderChart.value = eCharts.init(elRef.value);
  founderChart.value.setOption(options);
};

const initAreaMap = (elRef: Ref<HTMLElement>, options: EChartCoreOption) => {
  areaMapChart.value = eCharts.init(elRef.value);
  // @ts-ignore
  eCharts.registerMap("china", chinaJson);
  areaMapChart.value.setOption(options);
};

onMounted(() => {
  initFounder(founderChartRef, founderChartOptions);
  initAreaMap(areaMapRef, areaMapOptions);
});
</script>

<template>
  <div :class="prefixCls">
    <div :class="`${prefixCls}-left`">
      <div ref="founderChartRef" :class="`${prefixCls}-left-founder`"></div>
    </div>
    <div :class="`${prefixCls}-center`">
      <div ref="areaMapRef" :class="`${prefixCls}-center-area`"></div>
    </div>
    <div :class="`${prefixCls}-right`">右</div>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls:~ "@{namespace}-echarts";
.@{prefix-cls} {
  @apply flex px-3;
  &-left {
    &-founder {
      height: 300px;
      width: 400px;
    }
  }
  &-center {
    @apply flex-1;
    &-area {
      width: 1000px;
      height: 900px;
    }
  }
  &-right {
  }
}
</style>
